<!--
 * @FileDescription: 生产储存主页面
 * @Author: 祝小文
 * @Date: 2022-09-27 14:09
-->
<script setup lang="ts">
import PsTabLeft from './PsTabLeft.vue'
import TankFarm from './TankFarm/index.vue'
import Device from './Device/index.vue'
import Warehouse from './Warehouse/index.vue'
import Yard from './Yard/index.vue'
import TorchFacilities from './TorchFacilities/index.vue'
import AddTankFarm from './TankFarm/AddTankFarm.vue'
import AddStorageTank from './TankFarm/AddStorageTank.vue'
import AddDevice from './Device/AddDevice.vue'
import AddUnit from './Device/AddUnit.vue'
import AddEquipment from './Device/AddEquipment.vue'
import AddWarehouse from './Warehouse/AddWarehouse.vue'
import AddYard from './Yard/AddYard.vue'
import AddTorchFacilities from './TorchFacilities/AddTorchFacilities.vue'
import AddTorch from './TorchFacilities/AddTorch.vue'
import { clearEditState } from '@/utils/common/index'
const chemicalStore = useChemicalStore()
const tankFarm = chemicalStore.productionStorage.tankFarm
const device = chemicalStore.productionStorage.device
const warehouse = chemicalStore.productionStorage.warehouse
const yard = chemicalStore.productionStorage.yard
const torchFacilities = chemicalStore.productionStorage.torchFacilities

/** 左侧tab点击事件 */
const tabIndex = ref(0)
const tabClick = (id: number) => {
  clearEditState() //清除标注状态
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  tabIndex.value = id
}

/** 获取采集信息 */
const cjInfo = ref({})
const getCjInfo = (data: any) => {
  cjInfo.value = data
}

//生产存储公共字典
//查询使用状态
queryZdZdmcInfo({ key: 'syzt' }).then((res: any) => {
  chemicalStore.commonDictionaries.syzt = res
})
//查询危险源等级
queryZdZdmcInfo({ key: 'wxydj' }).then((res: any) => {
  chemicalStore.commonDictionaries.wxydj = res
})
</script>

<template>
  <div class="production-storage-container">
    <div class="production-storage-main">
      <!-- 左侧tab -->
      <PsTabLeft @tabClick="tabClick" />

      <div class="production-storage-content">
        <!-- 罐区内容 -->
        <TankFarm v-if="tabIndex === 0" @getCjInfo="getCjInfo" />
        <!-- 装置内容 -->
        <Device v-if="tabIndex === 1" @getCjInfo="getCjInfo" />
        <!-- 仓库内容 -->
        <Warehouse v-if="tabIndex === 2" @getCjInfo="getCjInfo" />
        <!-- 堆场内容 -->
        <Yard v-if="tabIndex === 3" @getCjInfo="getCjInfo" />
        <!-- 火炬内容 -->
        <TorchFacilities v-if="tabIndex === 4" @getCjInfo="getCjInfo" />
      </div>
    </div>

    <!-- 新增罐区 弹窗 -->
    <AddTankFarm v-if="tankFarm.addTankFarmShow" :cj-info="cjInfo" />
    <!-- 新增储罐 弹窗 -->
    <AddStorageTank v-if="tankFarm.addStorageTankShow" :cj-info="cjInfo" />

    <!-- 新增装置 弹窗 -->
    <AddDevice v-if="device.addDeviceShow" :cj-info="cjInfo" />
    <!-- 新增单元 弹窗 -->
    <AddUnit v-if="device.addUnitShow" :cj-info="cjInfo" />
    <!-- 新增设备 弹窗 -->
    <AddEquipment v-if="device.addEquipmentShow" :cj-info="cjInfo" />

    <!-- 新增仓库 弹窗 -->
    <AddWarehouse v-if="warehouse.addWarehouseShow" :cj-info="cjInfo" />

    <!-- 新增堆场 弹窗 -->
    <AddYard v-if="yard.addYardShow" :cj-info="cjInfo" />

    <!-- 新增火炬设施 弹窗 -->
    <AddTorchFacilities v-if="torchFacilities.addTorchFacilitiesShow" :cj-info="cjInfo" />

    <!-- 新增火炬 弹窗 -->
    <AddTorch v-if="torchFacilities.addTorchShow" :cj-info="cjInfo" />
  </div>
</template>

<style lang="less" scoped>
.production-storage-container {
  width: 100%;
  height: 100%;
  .production-storage-main {
    position: absolute;
    top: 112px;
    right: 10px;
    display: flex;
    height: calc(100% - 122px);
    z-index: 10;

    .production-storage-content {
      width: 460px;
      padding: 15px;
      border: 1px solid #0d609c;
      background: rgba(1, 7, 17, 0.7);
      box-sizing: border-box;
    }

    // 子组件公共样式
    div,
    span {
      font-size: 16px;
      color: #fff;
    }
    /deep/.card-operation-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        display: inline-block;
        width: 26px;
        height: 26px;
        margin-right: 15px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        vertical-align: middle;
        cursor: pointer;
      }

      .map-add {
        background-image: url(@/assets/image/common/map-add.png);
      }
      .map-delete {
        width: 24px;
        height: 24px;
        background-image: url(@/assets/image/common/map-delete.png);
      }

      i:nth-child(1) {
        background-image: url(@/assets/image/common/edit-icon.png);
      }
      i:nth-child(3) {
        width: 24px;
        height: 24px;
        margin-right: 0;
        background-image: url(@/assets/image/common/delete-icon.png);
      }
    }
    /deep/.card-bck-color {
      font-size: 16px;
      color: #fff;
      background-color: rgba(1, 7, 17, 0.6);
    }
    /deep/.card-search {
      margin-bottom: 10px;
      border-radius: 8px;
      .el-input__suffix {
        font-size: 18px;
        cursor: pointer;
      }
    }
    /deep/.card-footer {
      position: absolute;
      bottom: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 430px;
      height: 40px;
      background-color: rgba(119, 128, 130, 0.8);
      border: 1.5px dashed #ccc;
      border-radius: 10px;
      box-sizing: border-box;
      cursor: pointer;
      i {
        width: 28px;
        height: 28px;
        margin-right: 8px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(@/assets/image/common/plus-icon.png);
      }
      span {
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}
</style>
